<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <box1></box1>
            <letter></letter>
        </div>
    </div>
    <template id="box1">
        <div>
            <button @click="say()">gege</button>
        </div>
    </template>
    <template id="letter">
        <div>
            <div>didi</div>
            <div v-if="flag">呜呜呜呜呜.....</div>
        </div>
    </template>
</body>
</html>
<script>
    //事件总线 event-bus 兄弟 数据 通信
    //定义全局变量bus
    //通过 在弟弟组件中 在钩子函数created（）中 写 bus.$on(事件名，回调函数)
    //在 哥哥 组件中 使用bus.$emit（时间名）调用 获取 弟弟组件数据
    let bus = new Vue()
    new Vue({
        el:'#app',
        components:{
            box1:{
                template:'#box1',
                methods: {
                    say(){
                        bus.$emit('change')
                    }
                },
            },
            letter:{
                created() {
                    bus.$on('change',()=>{
                        this.flag=!this.flag
                    })
                },
                template:'#letter',
                data() {
                    return {
                        flag:false
                    }
                },
            }
        },
    })
</script>